{% extends "layout.html" %}
{% block css %}
    <link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}">
{% endblock %}
{% block content %}
<div class="form-content row justify-content-center">
    <div class="col-sm-8">
        {% if get_flashed_messages()[0] and get_flashed_messages()[0].errorMsg and  get_flashed_messages()[0].errorMsg[0]%}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>错误提示!</strong> {{get_flashed_messages()[0].errorMsg[0]}}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
        {% endif %}
        <div class="jumbotron">
            <h4>欢迎登录</h4>
            <form action="/auth/login" method="post">
                {{form.hidden_tag()}}
                <div class="form-group row">
                    {{form.email.label(class="col-sm-2 col-form-label")}}
                    <div class="col-sm-9">
                        {% if get_flashed_messages()[0] and get_flashed_messages()[0].email and  get_flashed_messages()[0].email[0]%}
                            {{form.email(class="form-control is-invalid")}}
                            <div class="invalid-feedback">
                               {{get_flashed_messages()[0].email[0]}}
                            </div>
                        {% else %}
                            {{form.email(class="form-control")}}
                        {% endif %}
                    </div>
                </div>
                <div class="form-group row">
                    {{form.password.label(class="col-sm-2 col-form-label")}}
                    <div class="col-sm-9">
                        {% if get_flashed_messages()[0] and get_flashed_messages()[0].password and get_flashed_messages()[0].password[0] %}
                            {{form.password(class="form-control is-invalid")}}
                            <div class="invalid-feedback">
                               {{get_flashed_messages()[0].password[0]}}
                            </div>
                        {% else %}
                            {{form.password(class="form-control")}}
                        {% endif %}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-9 offset-sm-2">
                        <div class="form-check">
                            {{form.remember_me(class="form-check-input")}}
                            {{form.remember_me.label(class="form-check-label")}}
                        </div>

                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-9 offset-sm-2">
                        {{form.submit(class="btn btn-primary")}}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}